<template>
  <div style="margin-top: 16px">
    <el-form-item>
      <template #label>
        <span class="assignee-label">处理人</span>
      </template>
      <el-button class="element-user-assignment-btn" dashed @click="showDrawer = true">
          {{ userLabel }}
      </el-button>
    </el-form-item>
    <el-form-item label="按钮">
      <task-btn :options="options" :id="id"></task-btn>
    </el-form-item>
    <el-form-item label="审批意见框" key="description">
      <el-checkbox v-model="userTaskForm.description" @change="updateElementTask('description')">显示</el-checkbox>
    </el-form-item>
    <el-form-item label="处理人下拉框" key="dueAuto">
      <el-checkbox v-model="userTaskForm.dueAuto" @change="updateElementTask('dueAuto')">显示</el-checkbox>
    </el-form-item>
    <el-form-item label="人员过滤器" key="filter">
      <el-select
              multiple
              filterable
              v-model="userTaskForm.filter"
              @change="updateElementTask('filter')"
              placeholder="对处理人进行二次过滤">
        <el-option
                v-for="item in filters"
                :key="item.key"
                :label="item.value"
                :value="item.key"
        >
          <div class="option-text">
            <span>{{ item.key }}</span>
            <span>{{ item.value }}</span>
          </div>
        </el-option>
      </el-select>
    </el-form-item>
    <el-drawer v-model="showDrawer" title="选择处理人" size="360px" destroy-on-close>
      <el-tabs v-model="selectTabValue" class="drawer-tabs">
        <el-tab-pane name="candidateGroups" label="角色">
          <el-select
            multiple
            filterable
            v-model="userTaskForm.candidateGroups"
            @change="updateElementTask('candidateGroups')"
            placeholder="请选择角色">
              <el-option
                v-for="item in roles"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
                <div class="option-text">
                  <span>{{ item.key }}</span>
                  <span>{{ item.value }}</span>
                </div>
            </el-option>
          </el-select>
        </el-tab-pane>
        <el-tab-pane name="candidateUsers" label="人员">
          <el-select
            multiple
            filterable
            v-model="userTaskForm.candidateUsers"
            @change="updateElementTask('candidateUsers')"
            placeholder="请选择人员">
              <el-option
                v-for="item in users"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
                <div class="option-text">
                  <span>{{ item.key }}</span>
                  <span>{{ item.value }}</span>
                </div>
            </el-option>
          </el-select>
        </el-tab-pane>
        <el-tab-pane name="assignee" label="表达式">
          <el-select
            v-model="userTaskForm.assignee"
            clearable
            filterable
            allow-create
            default-first-option
            placeholder="请输入表达式"
            @change="updateElementTask('assignee')"
          >
            <el-option label="默认" value="${assignee}" />
          </el-select>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>

<script>
import TaskBtn from '../ext-api/TaskBtn'

export default {
  name: "UserTask",
  components: { TaskBtn },
  props: {
    id: String,
    type: String,
    options: Object,
  },
  data() {
    return {
      defaultTaskForm: {
        assignee: "",
        candidateUsers: [],
        candidateGroups: [],
        dueAuto: false,
        filter: '',
        description: false
      },
      clearForm: {
        assignee: "",
        candidateUsers: [],
        candidateGroups: []
      },
      showDrawer: false,
      selectTabValue: 'candidateGroups',
      userLabel: '点击选择处理人',
      userTaskForm: {},
      searchValue: '',
      users: [],
      roles: [],
      filters: []
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = window.bpmnInstances.bpmnElement;
        this.userLabel = '点击选择处理人';
        this.$nextTick(() => this.initTaskForm());
      }
    }
  },
  mounted() {
    this.users = this.options.users || [];
    this.roles = this.options.roles || [];
    this.filters = this.options.filters || [];
  },
  methods: {
    initTaskForm() {
      for (let key in this.defaultTaskForm) {
        let value;
        if (this.isUser(key) || this.isGroup(key)) {
          value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
        } else if (this.isAssignee(key)) {
          value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
        } else if (this.isFilter(key)) {
          value = this.bpmnElement?.businessObject.$attrs[key] ? this.bpmnElement.businessObject.$attrs[key].split(",") : [];
        } else {
          value = this.bpmnElement?.businessObject.$attrs[key] || this.defaultTaskForm[key];
        }
        this.userTaskForm[key] = value
        this.setLabel(key);
      }
    },
    updateElementTask(key) {
      const taskAttr = Object.create(null);
      this.setEmpty(taskAttr, key);
      if (this.isUser(key) || this.isGroup(key) || this.isFilter(key)) {
        taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
      } else {
        taskAttr[key] = this.userTaskForm[key] || null;
      }
      this.setLabel(key);
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
    },
    setLabel(key, isUpdate) {
      if (!this.isGroup(key) && !this.isUser(key) && !this.isAssignee(key)) {
        return
      }
      const value = this.userTaskForm[key]
      if (!value) {
        this.userLabel = '点击选择处理人';
        return
      }
      if (value.length) {
        this.userLabel = this.filterLabel(key);
        this.selectTabValue = key;
      }
    },
    setEmpty(obj, updatekey) {
      // 用户要重新设置，其他不需要
      if (!this.isGroup(updatekey) && !this.isUser(updatekey) && !this.isAssignee(updatekey)) {
        return
      }
      for (let key in this.clearForm) {
        obj[key] = null;
        if (updatekey != key) {
          this.userTaskForm[key] = null;
        }
      }
    },
    isUser(key) {
      if (key) {
        return key === "candidateUsers"
      } else {
        this.selectTabValue === "candidateUsers";
      }
    },
    isGroup(key) {
      if (key) {
        return key === "candidateGroups"
      } else {
        this.selectTabValue === "candidateGroups";
      }
    },
    isFilter(key) {
      return key === "filter"
    },
    isAssignee(key) {
      return key === "assignee";
    },
    filterLabel(key) {
      let arr;
      const value = this.userTaskForm[key];

      if (this.isUser(key)) {
        arr = this.users.filter((it) => {
          for (const item of value) {
            if (it.key == item) {
              return true
            }
          }
          return false
        }).map(it => it.value);
      } else if (this.isGroup(key)) {
        arr = this.roles.filter((it) => {
          for (const item of value) {
            if (it.key == item) {
              return true
            }
          }
          return false
        }).map(it => it.value);
      } else {
        arr = [this.userTaskForm[key]];
      }
      if (!arr.length) {
        return "";
      }

      return arr.join(",");
    },
  },
  beforeUnmount() {
    this.bpmnElement = null;
  }
};
</script>
